<template>
  <div>
    <div id="index_header">
      <div class="w clearfix">
        <div class="logo fl">
          <a href="#" title="">
            <img src="../../assets/img/logo.jpg" />
          </a>
        </div>
        <div class="settleup">
          <a href="javascript:;" class="clearfix" @click="toShopCar">
            <span class="txt fl">我的购物车</span>
            <img class="icon-cart fl" src="../../assets/img/cart.png" alt="" />

            <span class="badge fl">{{$store.state.buyNum}}</span>
          </a>
        </div>
        <div class="search_box fr">
          <span @click="selectGoods(selectGoodsName)" class="hot-select-box">

            <span> {{ selectGoodsName }}</span>

            <img
              src="../../assets/img/arrow-down.png"
              alt=""
              class="iconfont icon-unfold"
            />
          </span>
          <ul id="classify" v-if="isShowHotBox" ref="treeWrap">
            <li data-type="1" data-type_id="0" @click="selectGoods('农产品')">
              农产品
            </li>
             <li data-type="1" data-type_id="1" @click="selectGoods('农资产品')">
              农资产品
            </li>

          </ul>
          <input
            type="text"
            :placeholder="selectGoodsName"
            id="keywords"
            value=""
            v-model="keywords"
            v-on:input="change"
          />
          <a class="search_r" href="javascript:void();" @click="serchkeyword()">搜索</a>
          <div class="search_res_box">
            <ul>
              <!-- <li><a href="http://geli.com/goods/index/shop_id/1/goods_id/3470.htm">乌鸡10公斤/箱</a></li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Cookie from "js-cookie";
 import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
  data() {
    return {
      isShowHotBox: false,
      selectGoodsName:'农产品',
      keywords:this.$store.state.keyWord,
      searchType: true
    };
  },
 
  mounted() {
    let _this = this;
    document.addEventListener("mouseup", e => {
      let tree = this.$refs.treeWrap;
      if (tree) {
        if (!tree.contains(e.target)) {
          this.isShowHotBox = false;
        }
      }
    });
    
  },
  methods: {
    // 去购物车
    toShopCar() {
      if (Cookie.get("token") && Cookie.get("token") !== "") {
        this.$router.push("/shopCar/shopCarOrder");
      } else {
        this.$router.push("/login");
      }
    },
  
    serchkeyword() {
      if(this.keywords == '') {
        this.$message({
          type:'error',
          message:"请输入关键字"
        })
        return;
      }
      if(this.searchType){
        this.$router.push({path:"/farmProducts/index1"});
        this.$store.commit("searchKeword", this.keywords);
      } else {
        this.$router.push({path:"/farmProducts"});
        this.$store.commit("searchKeword", this.keywords);
      }
    },
    selectGoods(selectName) {
      this.isShowHotBox = !this.isShowHotBox;
      this.selectGoodsName=selectName;
      console.log('selectName',selectName);
      if(selectName == '农资产品'){
        this.searchType = false;
      }

    },
    beforeDestroy() {
      document.getElementsByTagName("body")[0].off("click");
    },
    change(){
      console.log('keywords',this.keywords);
      if(this.keywords == '') {
        this.$store.commit("searchKeword", '');
      }
    }
  }
};
</script>
<style>
@import url("../../assets/css/reset.css");
@import url("../../assets/css/index.css");
</style>
<style scoped>
.icon-unfold {
  width: 16px;
  height: 18px;
  position: absolute;
  background-color: #fff;
  left: 78px;
  font-size: 12px;
  font-weight: 600;
  top: 7px;
  cursor: pointer;
}
</style>
